/*
 * @Description: 实时数据卡片
 * @Author: Vergil
 * @Date: 2021-09-15 09:37:30
 * @LastEditTime: 2021-09-16 14:52:10
 * @LastEditors: Vergil
 */

import './realTimeDataCard.scss'
import { defineComponent, ref, reactive } from 'vue'
import RingChart from './commonCharts/ringChart'

const realTimeDataCard = defineComponent({
  name: 'RealTimeDataCard',
  setup() {
    // 城市列表
    const city = reactive([
      '武汉市',
      '黄石市',
      '十堰市',
      '宜昌市',
      '襄阳市',
      '鄂州市',
      '荆门市',
      '黄冈市',
      '咸宁市'
    ])
    // 当前选中的城市索引
    const currCityIndex = ref(0)

    // 城市对应的RingChart值
    const cityValues = reactive({
      武汉市: { vehicleTotal: 50000, todayOnline: 20000, todayAlarm: 500 },
      黄石市: { vehicleTotal: 30000, todayOnline: 12000, todayAlarm: 300 },
      十堰市: { vehicleTotal: 25000, todayOnline: 10000, todayAlarm: 250 },
      宜昌市: { vehicleTotal: 35000, todayOnline: 15000, todayAlarm: 350 },
      襄阳市: { vehicleTotal: 45000, todayOnline: 18000, todayAlarm: 400 },
      鄂州市: { vehicleTotal: 20000, todayOnline: 8000, todayAlarm: 200 },
      荆门市: { vehicleTotal: 18000, todayOnline: 7000, todayAlarm: 180 },
      黄冈市: { vehicleTotal: 22000, todayOnline: 9000, todayAlarm: 220 },
      咸宁市: { vehicleTotal: 15000, todayOnline: 6000, todayAlarm: 150 }
    })

    // RingChart的值，根据当前选中城市动态设置
    const ringChartValues = ref([
      cityValues[city[0]].vehicleTotal,
      cityValues[city[0]].todayOnline,
      cityValues[city[0]].todayAlarm
    ])

    // 处理城市点击事件的函数
    const handleCityClick = (index) => {
      currCityIndex.value = index
      // 获取选中城市的名称
      const selectedCity = city[index]
      // 更新RingChart的值
      ringChartValues.value = [
        cityValues[selectedCity].vehicleTotal,
        cityValues[selectedCity].todayOnline,
        cityValues[selectedCity].todayAlarm
      ]
      // 刷新RingChart组件
      // RingChart.updateData(ringChartValues.value)
      console.log(ringChartValues.value)
    }

    return () => (
      <div class="realTimeDataCard">
        <div class="cardLeft">
          <h3>今日实时数据</h3>
          <p>全省数据</p>
          <ul>
            {city.map((item, index) => (
              <li
                key={index}
                class={index === currCityIndex.value ? 'active' : ''}
                onClick={() => handleCityClick(index)}
              >
                {item}
              </li>
            ))}
          </ul>
        </div>
        <div class="cardRight">
          {/* 使用ringChartValues中的值来设置RingChart组件的value属性 */}
          <RingChart
            color="1, 187, 218"
            chartName="车辆总数"
            value={ringChartValues.value[0]}
          ></RingChart>
          <RingChart
            color="227, 238, 110"
            chartName="今日上线"
            value={ringChartValues.value[1]}
          ></RingChart>
          <RingChart
            color="204, 72, 47"
            chartName="今日报警"
            value={ringChartValues.value[2]}
          ></RingChart>
        </div>
      </div>
    )
  }
})

export default realTimeDataCard
